@import '../../mixins'

.StylesEditor
  box(relative, flex)
  size(100%, 100%)
  align-items: stretch
  overflow: hidden
  background-color: var(--bg)

.StylesEditor .wrapper
  box(flex)
  flex-flow: column
  flex: 1 0 100%

// ---
// -- Vars
// -
.StylesEditor .vars
  box(relative)
  size(52%, 100%)
  overflow-y: auto
  flex-wrap: wrap
  justify-content: flex-start
  align-items: flex-start
  background-attachment: local
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  &:before
    content: ''
    box(absolute)
    size(100%, 1px)
    pos(0, 0)
    background-color: var(--border-flare-fg)

.StylesEditor > .title
  box(relative)
  text(s: rem(24))
  color: var(--title-fg)
  padding: 12px 16px

.StylesEditor .box
  box(relative, grid)
  grid-gap: 50px 0
  padding: 8px 0 16px

.StylesEditor section
  box(relative, grid)
  size(100%, max-w: 540px)
  margin: 0 auto
  padding: 2px 0 32px

.StylesEditor  section > h2
  box(relative)
  size(100%)
  text(s: rem(28), w: 400)
  color: var(--title-fg)
  text-align: center
  margin: 28px 0 24px

.StylesEditor .label
  text(s: rem(16))

.StylesEditor input
  text(s: rem(15))

.StylesEditor .ctrls
  box(relative, flex)
  grid-gap: 8px 8px
  justify-content: center
  flex-flow: wrap
  margin: 5px 16px 24px

.StylesEditor .btn
  size(auto)
  padding: 5px 16px

// ---
// -- CSS
// -
.StylesEditor .css
  box(relative, flex)
  size(48%)
  flex-flow: column
  background-color: #00000016
  overflow-y: auto
  overflow-x: hidden
  box-shadow: inset 0 0 8px 0 #00000036, inset 1px 0 0 0 #00000016
  background-attachment: local
  background-image: var(--bg-img)
  background-size: var(--bg-size)

.StylesEditor .css nav
  box(relative, flex)
  justify-content: center
  align-items: center
  padding: 16px 0
  box-shadow: inset 0 -1px 0 0 var(--border-fg), 0 1px 0 0 var(--border-flare-fg)

.StylesEditor .nav-item
  text(s: rem(18))
  color: var(--inactive-fg)
  padding: 8px 12px
  -moz-user-select: none
  cursor: pointer
  &:hover
    color: var(--info-fg)
  &[data-active]
    color: var(--active-fg)

.StylesEditor .editor-box
  box(relative, flex)
  flex-flow: column
  flex: 1 0 auto

.StylesEditor .editor
  box(relative, border-box)
  size(100%)
  text(monospace, s: rem(11))
  flex: 1 0 auto
  color: var(--true-fg)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 0
  padding: 16px
  background-color: transparent
  resize: none
  z-index: 1

  &:focus + .placeholder
    opacity: .7

.StylesEditor .editor-box > .placeholder
.StylesEditor .editor-box > .placeholder-note
  box(absolute)
  text(monospace, s: rem(11))
  color: var(--true-fg)
  white-space: pre-wrap
  padding: 16px
  transition: opacity var(--d-fast)

  &[data-hidden]
    transition: opacity var(--d-fast), z-index var(--d-fast) var(--d-fast)
    opacity: 0
    z-index: -1
  
.StylesEditor .editor-box > .placeholder-note
  top: 36px
  transition: opacity var(--d-fast) var(--d-fast)
  color: var(--info-fg)
  -moz-user-select: text
  z-index: 2
